<!--
 * @Author: jiangjinchi 1468922694@qq.com
 * @Date: 2023-10-31 10:43:44
 * @LastEditors: jiangjinchi 1468922694@qq.com
 * @LastEditTime: 2024-12-17 09:57:08
 * @FilePath: \vue-admin-template\src\views\projectManagement\reviewSheet\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
    <div class="distribution" v-if="showPage">
        <el-dialog title="" :visible.sync="showDetail" width="480px" :before-close="handleClose">
            <div style="text-align: center;">
                <span style="font-size: 20px;color: #3F3F3F;">{{ id ? '修改' : '新增' }}</span>
                <div style="margin-top: 30px;display: flex;text-align: center;margin-left: 20px;">
                    <el-form :rules="rules" ref="form" :model="form" label-width="90px">
                        <el-form-item label="类别" style="position: relative;" prop="type">
                            <el-select style="width: 270px;" v-model="form.type" placeholder="请选择" clearable>
                                <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name">
                                </el-option>
                            </el-select>
                            <img @click="secondDialog = true" src="@/assets/icon/设置.png"
                                style="margin-left: 10px;cursor: pointer;position: absolute;right: -30px;top: 30%;" alt="">
                        </el-form-item>
                        <el-form-item label="编号" prop="code">
                            <el-input v-model="form.code" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="名称" prop="name">
                            <el-input v-model="form.name" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="规格" prop="norm">
                            <el-input v-model="form.norm" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="单位" prop="unit">
                            <el-input v-model="form.unit" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="厂家" prop="manufacturer">
                            <el-input v-model="form.manufacturer" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                        <el-form-item label="安全库存" prop="cnt">
                            <el-input v-model="form.cnt" style="width: 270px;" clearable type="number"></el-input>
                        </el-form-item>
                        <el-form-item label="备注">
                            <el-input v-model="form.remark" style="width: 270px;" clearable></el-input>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button class="noraml-btn" @click="handleClose">取 消</el-button>
                <el-button class="noraml-btn" type="primary" @click="save">确 定</el-button>
            </span>
        </el-dialog>
        <selectDialog v-if="secondDialog" :secondDialog="secondDialog" @closeSelectDetail="closeSelectDetail">
        </selectDialog>
    </div>
</template>
  
<script>
import selectDialog from './selectDialog.vue'
export default {
    components: { selectDialog },
    props: {
        showDetail: {
            type: Boolean
        },
        id: {
            type: [String, Number]
        },
        options: {
            type: Array
        }
    },
    data() {
        return {
            secondDialog: false,

            rules: {
                type: [
                    { required: true, message: '请选择类别', trigger: ['blur', 'change'] }
                ],
                code: [
                    { required: true, message: '请填写编号', trigger: ['blur', 'change'] }
                ],
                name: [
                    { required: true, message: '请填写名称', trigger: ['blur', 'change'] }
                ],
                norm: [
                    { required: true, message: '请填写规格', trigger: ['blur', 'change'] }
                ],
                unit: [
                    { required: true, message: '请填写单位', trigger: ['blur', 'change'] }
                ],
                manufacturer: [
                    { required: true, message: '请填写厂家', trigger: ['blur', 'change'] }
                ],
                cnt: [
                    { required: true, message: '请填写安全库存', trigger: ['blur', 'change'] }
                ],
            },
            form: {
                type: '',
                code: '',
                name: '',
                norm: '',
                unit: '',
                manufacturer: '',
                remark: '',
                cnt: ''
            },
            showPage:false
        }
    },
    watch: {
        options(val) {
            if (this.form.type) {
                this.form.type = this.options.find(item => item.name == this.form.type) || '';
            }
        }
    },
    mounted() {
        if(this.id) {
            this.$baseRequestGet('/spar/info/getInfo/' + this.id,{},'get').then(res => {
                this.form = res.data;
                this.showPage = true;
            });
        }else {
            this.showPage = true;
        }
    },
    methods: {
        closeSelectDetail(e) {
            if (e) {
                this.$emit('needFreshDept');
            };
            this.secondDialog = false;
        },
        addItem() {
            this.form.list.push({
                name: ''
            })
        },
        deleteItem(index) {
            this.form.list.splice(index, 1)
        },
        handleClose(done) {
            this.$emit('closeDetail')
        },
        save() {
            this.$refs["form"].validate((valid) => {
                if (valid) {
                    let url = this.id ? '/spar/info/revise' : '/spar/info/create';
                    let meth = this.id ? 'put' : 'post'
                    this.$baseRequest(url, this.form, {}, meth).then(res => {
                        this.$message.success(`${this.id ? '修改' : '添加'}成功`);
                        this.$emit('closeDetail', 'isFresh')
                    })
                } else {

                    return false;
                }
            });

        }
    }
}
</script>
<style>
.distribution .el-dialog__body {
    padding-top: 15px;
}
</style>
<style lang="scss" scoped></style>
  